Card Layout

Spread.Views provides the Card Layout. The Card Layout helps you manage two or more components that share the same display block or card. This layout engine creates blocks that are the same height and width. The Card Layout also supports Grouping and Nested Grouping. See Grouping for additional information.

In the Card Layout, the card's internal design is modified using the row templates and the presenters whereas the external design is edited using the card layout engine options.

You can choose from the following Card Layout options.

Option	Default Value	Description
cardHeight	256	Defines the height of the card. Each card has the same height.
cardWidth	256	Defines the width of the card. Each card has the same width.
direction	horizontal	Defines the direction of the layout. You can choose from the following enumeration values. Horizontal - When the direction is horizontal, the layout engine tries to place all the items horizontally and then extends the space in the vertical direction. Normally a vertical scroll bar is displayed. Vertical - When the direction is vertical, the layout engine tries to place all the items vertically and then extends the space in the horizontal direction. Normally a horizontal scroll bar is displayed.
showScrollBar	true	Specifies whether to display the scroll bars.
rightToLeft	false	Enables or disables the right-to-left display.

Use the following steps to create a horizontal grid using the CardLayout.

Sample Code

To create a grid using the card layout, add the following references after the dataview reference.

   <link rel="stylesheet" type="text/css" href="[Your Stylesheet Path]/plugins/gc.spread.views.cardlayout.10.1.1.css">  
<script src="[Your Script Path]/gc.spread.views.cardlayout.10.1.1.min.js"></script>
<script src="data/films.js" type="text/javascript"></script>

Add a

tag within the tag to include the DOM element as the container in the page. Then add the